<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/stu.css">
</head>
<body>
<div class="container">
    <select name="" id="sel">
        <option value="">请选择同学</option>
        <option value="f1">第一位同学</option>
        <option value="f2">第二位同学</option>
        <option value="f3">第三位同学</option>
    </select>
    <div id="main">
        <p class="msg">学生信息</p>
        <p>
            姓名:
            <span id="name"></span>
        </p>
         <p>
             性别:
            <span id="sex"></span>
        </p>
        <p>
            年龄:
             <span id="age"></span>
        </p>
        <p>
            身高:
            <span id="height"></span>
        </p>
        <p>
            爱好:
            <span id="hobby"></span>
        </p>
        <p>
            邮箱:
            <span id="email"></span>
        </p>
        <p>
            联系电话:
            <span id="phone"></span>
        </p>
        <p>
            籍贯:
            <span id="adress""></span>
        </p>
        <p>
            专业:
            <span id="pro"></span>
        </p>
        <p>
            政治面貌:
            <span id="face"></span>
        </p>
    </div>
    
</div>
</body>
<script>
    var sel=document.getElementById('sel');
    sel.onchange=function(){  
    if(this.value==''){
            return
    }
    var stus=new XMLHttpRequest();
    stus.open('get','/stu?id='+this.value,true)
   
    stus.onreadystatechange=function(){ 
        if(stus.readyState==4&&stus.status==200){
            document.getElementById('name').innerHTML=JSON.parse(stus.responseText).username;
            document.getElementById('sex').innerHTML=JSON.parse(stus.responseText).sex;
            document.getElementById('age').innerHTML=JSON.parse(stus.responseText).age;
            document.getElementById('height').innerHTML=JSON.parse(stus.responseText).height;
            document.getElementById('hobby').innerHTML=JSON.parse(stus.responseText).hobby;            
            document.getElementById('email').innerHTML=JSON.parse(stus.responseText).email;
            document.getElementById('phone').innerHTML=JSON.parse(stus.responseText).phone;
            document.getElementById('adress').innerHTML=JSON.parse(stus.responseText).address;
            document.getElementById('pro').innerHTML=JSON.parse(stus.responseText).pro;  
            document.getElementById('face').innerHTML=JSON.parse(stus.responseText).face;              
        }else{
           
        }
    }
    stus.send();
}
</script>
</html>